
<!--html版本声明，声明本HTML文件是html5  -->
<!DOCTYPE html>


<!-- HTML标签是页面的跟标签 -->
<html lang="en">

<!-- html是页面头标签 -->
<head>
    <!-- title标签，设置页面标签 -->
    <title>风车</title>

    <!-- style标签，用于编写页面css -->
    <style>

        /* #表示id选择器，#xxx 表示选择页面中id属性值为xxx 的元素。*/
        #container{
            height: 930px;
            width: 1900px;
            /* background-color: #FF0000; */

            border: solid 2px black;  

            background-image: url(caodi.png);
            /* 设置图片背景的尺寸，100%表示图片尺寸是元素尺寸的100% */
            background-size: 100% 100%;

            
            position:relative;
        }

        /* .表示class选择器，.xxx选择页面中class值办函xxx的元素。 */
        .pic{
            /* 将元素的 */
            position: absolute;
            /*设置动画时间 */
            animation: spin;

            animation-duration: 6000ms;
            /* 设置动画次数 */
            animation-iteration-count: infinite;
            animation-timing-function:  linear;


        }
        #f1{
            width: 400px;
            height: 400px;
            left: 440px;
            top: 210px;


        }
        #f2{
            width: 200px;
            height: 200px;
            left: 873px;
            top: 560px 

        }
        #f3{
            width: 300px;
            height: 300px;
            left: 1095px;
            top: 450px;
        }
        
        @keyframes spin{
            0%{
                transform: rotate(0)
            }
            100%{
                transform:rotate(360deg)
            }
        }
        #f1:hover{
            /*  */
            animation-duration: 1s;

        }
        #f2:hover{
            animation-play-state: paused;
        }
        #f3:hover{
            animation-direction: reverse;
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- img标签，用于显示一张图片，其中src属性表示图片的地址 -->
       <img id="f1" class="pic" src="fengche.png" > 
       <img id="f2" class="pic" src="fengche.png" > 
       <img id="f3" class="pic" src="fengche.png" > 


    </div>

</body>
</html>